<template>
  <el-form :model="settingForm"
           label-position="left"
           label-width="120px"
           :inline="true"
           >

    <el-form-item label="显示键盘">
      <el-switch
          v-model="settingForm.showKeyboard"

      />
    </el-form-item>
    <el-form-item label="开启声音">
      <el-switch
          v-model="settingForm.playAudio"

      />
    </el-form-item>
    <el-form-item label="键盘提示">
      <el-switch
          v-model="settingForm.showKeyboardAdvice"
      />
    </el-form-item>
    <el-form-item label="显示进度">
      <el-switch
          v-model="settingForm.showProgress"
      />
    </el-form-item>
    <el-form-item label="显示耗时">
      <el-switch
          v-model="settingForm.showSpendTime"
      />
    </el-form-item>
    <el-form-item label="显示准确率">
      <el-switch
          v-model="settingForm.showAccuracy"
      />
    </el-form-item>
    <el-form-item label="显示错误个数">
      <el-switch
          v-model="settingForm.showErrorNum"
      />
    </el-form-item>
    <el-form-item label="显示速度">
      <el-switch
          v-model="settingForm.showSpeed"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
  import { reactive,defineEmits,defineProps } from 'vue'
  import {GlobalSetting} from "@/ts/setting";

  const props = defineProps<{
    setting:GlobalSetting
  }>();
  // do not use same name with ref
  let settingForm = reactive<GlobalSetting>({})
  Object.assign(settingForm,props.setting)

  let emit=defineEmits(["submit","cancel"])
  function submit(){
    emit("submit",settingForm)
  }
  function cancel(){
    emit("cancel")
  }



</script>

<style scoped lang="less">

</style>